<template>
    <div class="canlen_1">
        <div>
            <span class="dd">{{ DD }}</span>/<span>{{ MM }}</span>&emsp;<span>{{ YY }}</span>
            <p>周{{weak}} 农历</p>
        </div>

        <div class="canlen_2">
            <el-calendar v-model="value" />
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const value = ref(new Date())

// 年
let YY = new Date().getFullYear();
// 月
let MM = new Date().getMonth() + 1;
// 日
let DD = new Date().getDate();
// 星期
let WW = new Date().getDay();
let arr = ['日', '一', '二', '三', '四', '五', '六']
let weak = ref(0)
weak = arr[WW]      //引用星期对应的下标

</script>

<style scoped>
.canlen_1 {
    position: relative;
    height: 50px;
}

.canlen_1:hover .canlen_2 {
    display: block;
}

.canlen_2 {
    display: none;
    position: absolute;
    top: 55px;
    right: 0;
    width: 800px;
    height: 500px;
    /* border: 1px solid #000; */
    z-index: 666;
}

.dd {
    display: inline-block;
    font-size: 22px;
    font-weight: 800;
}

span {
    font-weight: 800;
}
p{
    color: #ccc;
}
</style>